<template>
	<view class="container">
		<image class="bg" src="@/static/admin/index_bg.png" mode="widthFix"></image>
		<view class="wrap">
			<view class="info">
				<view class="department">
					{{userinfo.department_name}}
				</view>
				<view class="name">
					<image src="@/static/admin/index-admin.png" mode=""></image>
					{{userinfo.nickname}}
					<text>
						{{userinfo.group_name}}
					</text>
				</view>
			</view>
			<view class="list">
				<view class="col" v-for="(item,index) in list" :key="index" @click="goUrl(item.url)">
					<view class="item">
						<image :src="item.icon" mode=""></image>
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<tabbar active='1'></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar_admin.vue"
	export default {
		components: {
			tabbar
		},

		data() {
			return {
				userinfo: {},
				list: [{
					url: 'add',
					icon: require("@/static/admin/index-icon1.png"),
					text: '新增工人'
				}, {
					url: 'import',
					icon: require("@/static/admin/index-icon2.png"),
					text: '批量导入'
				}, {
					url: 'manage',
					icon: require("@/static/admin/index-icon3.png"),
					text: '工人管理'
				}, {
					url: 'score',
					icon: require("@/static/admin/index-icon4.png"),
					text: '积分查询'
				}, {
					url: 'bonus',
					icon: require("@/static/admin/index-icon5.png"),
					text: '加分'
				}, {
					url: 'minus',
					icon: require("@/static/admin/index-icon6.png"),
					text: '扣分'
				}]
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
		onLoad() {
			this.getUserinfo()
		},
		methods: {
			getUserinfo() {
				this.$post("/user/userinfo", {}).then(res => {
					this.userinfo = res.data
				})
			},
			goUrl(url) {
				if (url == 'bonus') {
					uni.navigateTo({
						url: `./bonus/bonus?type=add`
					})
				} else if (url == 'minus') {
					uni.navigateTo({
						url: `./bonus/bonus?type=minus`
					})
				} else {
					uni.navigateTo({
						url: `./${url}/${url}`
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.bg {
			position: absolute;
			width: 100%;

		}
	}

	.info {
		color: #fff;
		padding: 70rpx 0;

		.department {
			font-size: 40rpx;
			margin-bottom: 30rpx;
		}

		.name {
			display: flex;
			align-items: center;
			font-size: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			text {
				display: inline-block;
				margin-left: 30rpx;
				padding: 0 20rpx;
				line-height: 34rpx;
				background: #5589FF;
				border-radius: 17px;
				font-size: 24rpx;
			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 40rpx;

		.col {
			// width: 50%;
			text-align: center;
			position: relative;
			padding: 25% 25%;

			&:nth-child(2n+1)::before {
				content: '';
				width: 188rpx;
				height: 2rpx;
				border-top: 2rpx dashed #e2e2e2;
				position: absolute;
				top: 0;
				left: 100%;
				transform: translateX(-50%);
			}

			&:nth-child(2n+1)::after {
				content: '';
				width: 2rpx;
				height: 188rpx;
				border-left: 2rpx dashed #e2e2e2;
				position: absolute;
				top: 0%;
				right: 0;
				transform: translateY(-50%);
			}

			&:first-child::before,
			&:first-child::after {
				opacity: 0;
			}

			.item {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0%;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}


		}
	}
</style>